Skip to content

fix(ui): remove @toast-ui/react-editor dependency and migrate to BlockEditor#26887

Open
harsh-vador wants to merge 18 commits intomainfrom
remove-richtexteditor-previewer
Open

fix(ui): remove @toast-ui/react-editor dependency and migrate to BlockEditor#26887
harsh-vador wants to merge 18 commits intomainfrom
remove-richtexteditor-previewer

Conversation

@harsh-vador
Copy link
Copy Markdown
Contributor

@harsh-vador harsh-vador commented Mar 31, 2026 •
edited by gitar-bot bot
Loading

Fixes 27314

Describe your changes:

Summary

  • Replaces all usages of the deprecated RichTextEditorPreviewer (Toast-UI based) with RichTextEditorPreviewerV1 (BlockEditor/TipTap) in ServiceDocPanel, SSODocPanel, and ArticleViewer
  • Removes @toast-ui/react-editor from package.json along with all supporting files (CustomHtmlRederer/, RichTextEditorPreviewer.tsx, its test, and its .less)
  • Adds a processServiceDocMarkdown preprocessor in ServiceDocPanel to convert the custom $$section/$(id="...") syntax (used in service .md doc files) into <section data-id="..."> HTML, preserving the scroll-to-field highlighting feature
  • Replaces toast-ui-specific CSS (.toastui-editor-contents) with self-contained typography styles in service-doc-panel.less
Screen.Recording.2026-04-20.at.3.35.37.PM.mov
Screen.Recording.2026-04-20.at.3.36.04.PM.mov

Type of change:

  • Bug fix
  • Improvement
  • New feature
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation

Checklist:

  • I have read the CONTRIBUTING document.
  • My PR title is Fixes <issue-number>: <short explanation>
  • I have commented on my code, particularly in hard-to-understand areas.
  • For JSON Schema changes: I updated the migration scripts or explained why it is not needed.

Summary by Gitar

  • Refactor SSO configuration form:
    • Wrapped form event listeners with useCapture: true for click and keydown events in SSOConfigurationForm.tsx.
    • Applied service-doc-panel and content-resizable-panel-container classes to side panels in SSOConfigurationForm.tsx.
  • Miscellaneous improvements:
    • Replaced toastui-editor with block-editor-wrapper styling in domain.less and glossary.less.
    • Added jwtPrincipalClaimsMapping to FIELD_MAPPINGS in SSODocPanel.constants.ts.

This will update automatically on new commits.

@harsh-vador harsh-vador self-assigned this Mar 31, 2026
@harsh-vador harsh-vador requested a review from a team as a code owner March 31, 2026 11:16
@harsh-vador harsh-vador added the safe to test Add this label to run secure Github workflows on PRs label Mar 31, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 31, 2026 •
edited
Loading

🟡 Playwright Results — all passed (20 flaky)

✅ 3667 passed · ❌ 0 failed · 🟡 20 flaky · ⏭️ 89 skipped

Shard Passed Failed Flaky Skipped
🟡 Shard 1 480 0 1 4
🟡 Shard 2 648 0 5 7
✅ Shard 3 659 0 0 1
🟡 Shard 4 629 0 5 27
🟡 Shard 5 610 0 1 42
🟡 Shard 6 641 0 8 8
🟡 20 flaky test(s) (passed on retry)
  • Pages/UserCreationWithPersona.spec.ts › Create user with persona and verify on profile (shard 1, 1 retry)
  • Features/BulkEditEntity.spec.ts › Glossary (shard 2, 1 retry)
  • Features/DataQuality/ColumnLevelTests.spec.ts › Column Values Sum To Be Between (shard 2, 1 retry)
  • Features/DataQuality/TestCaseImportExportE2eFlow.spec.ts › Admin: Complete export-import-validate flow (shard 2, 1 retry)
  • Features/DataQuality/TestCaseResultPermissions.spec.ts › User with only VIEW cannot PATCH results (shard 2, 1 retry)
  • Features/Glossary/GlossaryWorkflow.spec.ts › should inherit reviewers from glossary when term is created (shard 2, 1 retry)
  • Pages/Customproperties-part2.spec.ts › entityReferenceList shows item count, scrollable list, no expand toggle (shard 4, 1 retry)
  • Pages/DataContracts.spec.ts › Create Data Contract and validate for Table (shard 4, 1 retry)
  • Pages/DataContractsSemanticRules.spec.ts › Validate Owner Rule Any_In (shard 4, 1 retry)
  • Pages/DataContractsSemanticRules.spec.ts › Validate Description Rule Is_Not_Set (shard 4, 1 retry)
  • Pages/DataContractsSemanticRules.spec.ts › Validate DataProduct Rule Any_In (shard 4, 1 retry)
  • Pages/Glossary.spec.ts › Add and Remove Assets (shard 5, 1 retry)
  • Pages/Glossary.spec.ts › Create glossary, change language to Dutch, and delete glossary (shard 6, 1 retry)
  • Pages/Lineage/DataAssetLineage.spec.ts › verify create lineage for entity - Dashboard (shard 6, 1 retry)
  • Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)
  • Pages/Lineage/LineageRightPanel.spec.ts › Verify custom properties tab IS visible for supported type: searchIndex (shard 6, 1 retry)
  • Pages/UserDetails.spec.ts › Create team with domain and verify visibility of inherited domain in user profile after team removal (shard 6, 1 retry)
  • Pages/Users.spec.ts › Permissions for table details page for Data Consumer (shard 6, 1 retry)
  • Pages/Users.spec.ts › Check permissions for Data Steward (shard 6, 1 retry)
  • VersionPages/EntityVersionPages.spec.ts › Directory (shard 6, 1 retry)

📦 Download artifacts

How to debug locally 
# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 4, 2026 •
edited
Loading

Jest test Coverage

UI tests summary

Lines Statements Branches Functions
Coverage: 63%
 63.3% (59160/93452) 43.59% (31375/71975) 46.45% (9414/20265)

@gitar-bot
Copy link
Copy Markdown

gitar-bot bot commented Apr 20, 2026 •
edited
Loading

Code Review ✅ Approved 1 resolved / 1 findings

Migration to BlockEditor removes the @toast-ui/react-editor dependency and resolves the CSS selector injection vulnerability caused by the unescaped fieldName.

✅ 1 resolved
✅ Security: CSS selector injection via unescaped fieldName in querySelector

📄 openmetadata-ui/src/main/resources/ui/src/components/common/ServiceDocPanel/ServiceDocPanel.tsx:191
On line 191, fieldName is interpolated directly into a CSS attribute selector: document.querySelector(\[data-id="${fieldName}"]`). If fieldNamecontains CSS selector metacharacters (e.g.,", ], `), it could break the selector or cause unexpected behavior. While activeField currently comes from internal form state (not direct user input), this is a defensive-coding concern — any future change that routes URL parameters or external input into activeField would create a real injection vector.

Use CSS.escape() to sanitize the value before interpolation.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact 
gitar display:verbose

Was this helpful? React with 👍 / 👎 | Gitar

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Apr 20, 2026

Quality Gate Passed Quality Gate passed for 'open-metadata-ui'

Issues
924 New issues
0 Accepted issues

Measures
14 Security Hotspots
0.0% Coverage on New Code
3.9% Duplication on New Code

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@gitar-bot gitar-bot[bot] gitar-bot[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@harsh-vador harsh-vador

Labels

safe to test Add this label to run secure Github workflows on PRs

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Remove @toast-ui/react-editor dependency and migrate to BlockEditor

3 participants

@harsh-vador @harshach @Rohit0301